<!DOCTYPE HTML>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>SlickGrid example 5: Collapsing</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../slick.grid.css" type="text/css" />
    <link rel="stylesheet" href="../../controls/slick.pager.css" type="text/css" />
    <link rel="stylesheet" href="../../plugins/slick.headermenu.css" type="text/css" />
    <link rel="stylesheet" href="../../plugins/slick.headerbuttons.css" type="text/css" />
    <link rel="stylesheet" href="../../css/smoothness/jquery-ui.css" type="text/css" />
    <link rel="stylesheet" href="../../css/bom-slickgrid.css" />
    <link rel="stylesheet" href="../../css/bom-slickgrid-default.css" />
    <link rel="stylesheet" href="../examples.css" type="text/css" />
    <link rel="stylesheet" href="../../css/select2.css" type="text/css" />
    <link rel="stylesheet" href="index.css" type="text/css" />

</head>

<body>
    <table width="100%">
        <tr>
            <td valign="top" width="80%">
                <div id='rootDiv' style="position:relative">
                    <div class="grid-header" style="width:100%">
                        <label>stone slick-grid</label>
                        <span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel"
                            onclick="toggleFilterRow()"></span>
                    </div>

                    <div id="myGrid" style="width:100%;height:500px;;"></div>
                    <div id="pager" style="width:100%;height:20px;"></div>

                    <div id="inlineFilterPanel" style="display:none;background:transparent;padding:3px;color:black;">
                        Filter: <input type="text" id="txtSearch2">
                        Position:<input type="text" id="txtPosition"><a>Q</a>
                        <a>导出EXCEL</a>
                    </div>
                </div>
            </td>
            </td>
            <td valign="top">
                <h2>Demonstrates:</h2>
                <ul>
                    <li>implementing expand/collapse as a filter for DataView</li>
                </ul>

                <h2>View Source:</h2>
                <ul>
                    <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example5-collapsing.html"
                            target="_sourcewindow"> View the source for this example on Github</a></li>
                </ul>

                <h2>TODO:</h2>
                <ul>
                    <li>add child</li>
                    <li>remove child</li>
                    <li>cell button</li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </td>
        </tr>
    </table>
    <ul id="contextMenu" style="display:none;position:absolute">
        <b>操作:</b>
        <li id='excel' data="excel">export excel</li>
        <li id='pdf' data="pdf">export pdf</li>
        <li id='scrollRowIntoView' data="search"><input id='scrollRowIntoViewSearch' type="input" style="width: 100px;"
                value="1" />
            <input id='scrollRowIntoViewQuery' type="button" value="Q" />
        </li>
        <li id='addRow'>add row</li>
        <li id='removeRow'>remove row</li>
        <li id='level' data="level">
            <select id='levelOp'>
                <option>ALL</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
            </select>
        </li>
    </ul>
    <!--https://github.com/rainabba/jquery-table2excel-->
    <script src="../../lib/firebugx.js"></script>
    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!--<script src="../../lib/jquery-1.7.min.js"></script>-->
 
    
    <script src="../../lib/jquery.event.drag-2.2.js"></script>
    <script src="../../lib/jquery-ui.min.js"></script>
    <script src="../../slick.core.js"></script>
    <script src="../../slick.formatters.js"></script>
    <script src="../../slick.editors.js"></script>
    <script src="../../slick.grid.js"></script>
    <script src="../../slick.dataview.js"></script>
    <script src="../../plugins/slick.autotooltips.js"></script>
    <script src="../../plugins/slick.cellrangedecorator.js"></script>
    <script src="../../plugins/slick.cellrangeselector.js"></script>
    <script src="../../plugins/slick.cellexternalfullcopymanager.js"></script>
    <script src="../../plugins/slick.cellselectionmodel.js"></script>
    <script src="../../controls/slick.columnpicker.js"></script>
    <script src="../../plugins/slick.headermenu.js"></script>
    <script src="../../plugins/slick.headerbuttons.js"></script>
    <script src="../../lib/jszip.min.js"></script>
    <script src="../../lib/FileSaver.js"></script>
    <script src="../../controls/slick.pager.js"></script>
    <script src="../../plugins/slick.checkboxselectcolumn.js"></script>
    <script src="../../plugins/slick.rowselectionmodel.js"></script>
    <script src="../../plugins/slick.report.js"></script>
    <script src="../../lib/select2.js"></script>
    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="index.js"></script>
    <script src="../../plugins/slick.tools.js"></script>
    <script src="dataView.plugin.js"></script>
</body>

</html>